<template>
  <section class="refresh">
    <i v-if="!loading && !loadingTips"
       @click="refresh"
       class="el-icon-refresh"></i>
    <i class="el-icon-loading"
       v-if="loading"></i>
    <p class="tips"
       v-if="loadingTips && !loading">
      <i class="el-icon-check"></i>
      加载成功
    </p>
  </section>
</template>
<script>
export default {
  name: "refresh",
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    loadingTips: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      showLoadingTips: false
    }
  },
  watch: {
    loadingTips (v) {
      if (v) {
        this.showLoadingTips = true
        setTimeout(() => {
          this.showLoadingTips = false
        }, 2000)
      }
    },
    showLoadingTips (v) {
      this.$emit('update:loadingTips', v)
    }
  },
  methods: {
    refresh () {
      this.$emit('refresh')
    }
  }
}
</script>
<style lang="scss" scoped>
.refresh {
  margin-right: 10px;
  display: inline-block;
  i {
    cursor: pointer;
  }
  .tips {
    i {
      color: #67c23a;
    }
    font-size: 12px;
    color: #67c23a;
    margin-right: 10px;
  }
}
</style>
